<template>
    <el-dialog :visible.sync="dialogFormVisible" title="完工核实" class="controlModel">
        <el-form ref="verifyForm" :model="form" :rules="rules" size="medium" label-width="90px">
          <el-form-item label="核实说明" prop="verifyDesc">
              <el-input v-model="form.verifyDesc" type="textarea" maxlength="300" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="图片上传" prop="files">
              <div class="tips">最多可上传10张</div>
              <el-upload
                v-loading="loading"
                :class="{hide: !isShowUpload}"
                :action="action"
                :headers="headers"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :on-preview="handlePictureCardPreview"
                :before-upload="handleBeforeUpload"
                :on-exceed="handleExceed"
                :limit="10"
                accept="image/jpeg, image/png"
                class="img-box"
                list-type="picture-card"
                :file-list="fileList"
                :on-error="handleError"
                multiple
              >
                <i class="el-icon-plus"></i>
              </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <BaseButton type="second" @click="dialogFormVisible = false">取 消</BaseButton>
            <BaseButton type="primary" @click="handleConfirm">确 定</BaseButton>
        </div>
        <!-- 图片预览 -->
        <div v-viewer="{}" class="images" style="display:none;"> 
            <img
                v-for="(item,index) in submitFileList"
                :key="index"
                :src="item.url"
                :alt="item.url"
            >
        </div>
    </el-dialog>
</template>

<script>
import { MaintenanceProjectModel } from '@/models'
import { UploadOption, ResponseCode } from '@/config/constants'
import { fileTokenKey } from '@/config/settings'
import { getToken } from '@/utils/auth'
export default {
    name: 'VerifyDialog',
    data() {
        return {
            model: new MaintenanceProjectModel(),
            action: UploadOption.ACTION,
            headers: {
                [fileTokenKey]: getToken()
            },
            dialogFormVisible: false,
            loading: false,
            isShowUpload: true,
            fileList: [],
            submitFileList: [],
            form: {},
            rules: {
                verifyDesc: [
                    {required: true, message: '请输入核实说明', trigger: 'change'}
                ]
            },
        }
    },
    methods: {
        handleConfirm() {
            this.$refs.verifyForm.validate(valid => {
                if (valid) {
                    const data = {
                        ...this.form,
                        verifyPhotos: this.getFileList()
                    }
                    this.model.verify(data).then(res => {
                        this.$emit('updateList')
                        this.dialogFormVisible = false
                        this.$message.success('操作成功！')
                    })
                }
            })
        },
        init(data) {
            this.dialogFormVisible = true
            this.form.number = data.number
        },
        handleSuccess(res, file, fileList) {
            if (res.code === ResponseCode.success) {
                this.submitFileList = fileList
                this.uploadBtnShow(this.submitFileList)
            } else {
                fileList.some((item, index) => {
                    if (item.uid === file.uid) {
                        fileList.splice(index, 1)
                        return true
                    }
                })
                this.$message.error('文件上传失败，请重试！')
            }
        },
        handleError() {
            this.$message.error('网络异常，请稍后再试!')
        },
        handleRemove(file) {
            this.submitFileList.some((item, index) => {
                if (item.uid === file.uid) {
                    this.submitFileList.splice(index, 1)
                    return true
                }
            })
            this.uploadBtnShow(this.submitFileList)
        },
        
        handlePictureCardPreview(file) {
            const viewer = this.$el.querySelector('.images').$viewer
            const index = this.submitFileList.indexOf(this.submitFileList.filter(el => el.uid === file.uid)[0])
            // viewer.show()
            viewer.view(index)
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
        },
        handleBeforeUpload(file) {
            // 文件大于100MB的禁止上传
            if (file.size / 1024 / 1024 > 100) {
                this.$message.error(`文件${file.name}大小超过100MB`)
                return false
            }
            return true
        },
        getFileList() {
            const data = this.submitFileList.map((item) => item.response.data.objectUrl)
            return data.join(',')
        },
        uploadBtnShow(fileList) {
            this.isShowUpload = !(fileList.length >= 10)
        }
    }
}
</script>

<style scoped lang="scss">
.tips{
  font-size: 13px;
  color: #9a9a9a;
}
.hide ::v-deep .el-upload--picture-card {
    display: none;
}
</style>
